309. Araxis Merge File Comparison Report

Produced by Araxis Merge on 2023-07-12 04:43:08 +0000. See www.araxis.com for information about Merge. This report uses XHTML and CSS2, and is best viewed with a modern standards-compliant browser. For optimum results when printing this report, use landscape orientation and enable printing of background images and colours in your browser.

309.1 Files compared

#LocationFileLast Modified
1Porto v4.0.5/Theme Files/Porto Theme/app/design/frontend/Smartwave/porto/Magento_Theme/web/css/source_module.less2023-02-10 07:52:48 +0000
2Porto v4.0.6/Theme Files/Porto Theme/app/design/frontend/Smartwave/porto/Magento_Theme/web/css/source_module.less2023-06-29 03:15:34 +0000

309.2 Comparison summary

DescriptionBetween
Files 1 and 2
Text BlocksLines
Unchanged21636
Changed12
Inserted00
Removed00

309.3 Comparison options

WhitespaceConsecutive whitespace is treated as a single space
Character caseDifferences in character case are significant
Line endingsDifferences in line endings (CR and LF characters) are ignored
CR/LF charactersNot shown in the comparison detail
Active line-pairing rules

309.4 Active regular expressions

No regular expressions were active.

309.5 Comparison detail

1 // /** 1 // /**
2 //  * Copyright © 2015 Magento. All rights reserved. 2 //  * Copyright © 2015 Magento. All rights reserved.
3 //  * See COPYING.txt for license details. 3 //  * See COPYING.txt for license details.
4 //  */ 4 //  */
5  5 
6 @import 'module/_collapsible_navigation.less'; 6 @import 'module/_collapsible_navigation.less';
7 @import 'module/_heading.less'; 7 @import 'module/_heading.less';
8 @import 'module/_info_box.less'; 8 @import 'module/_info_box.less';
9 @import 'module/_social_icons.less'; 9 @import 'module/_social_icons.less';
10 @import 'module/_testimonial.less'; 10 @import 'module/_testimonial.less';
11 // 11 //
12 //  Theme variables 12 //  Theme variables
13 //  _____________________________________________ 13 //  _____________________________________________
14  14 
15 // 15 //
16 //  Messages 16 //  Messages
17 //  --------------------------------------------- 17 //  ---------------------------------------------
18  18 
19 @message-global-note__color: @text__color; 19 @message-global-note__color: @text__color;
20 @message-global-note__background: @color-yellow-light2; 20 @message-global-note__background: @color-yellow-light2;
21 @message-global-note-link__color: @link__color; 21 @message-global-note-link__color: @link__color;
22 @message-global-note-link__color-hover: @link__hover__color; 22 @message-global-note-link__color-hover: @link__hover__color;
23 @message-global-note-link__color-active: @link__active__color; 23 @message-global-note-link__color-active: @link__active__color;
24 @message-global-note__border-color: @color-yellow-light3; 24 @message-global-note__border-color: @color-yellow-light3;
25  25 
26 @message-global-caution__color: @color-white; 26 @message-global-caution__color: @color-white;
27 @message-global-caution__background: @color-red9; 27 @message-global-caution__background: @color-red9;
28 @message-global-caution-link__color: @link__color; 28 @message-global-caution-link__color: @link__color;
29 @message-global-caution-link__color-hover: @link__hover__color; 29 @message-global-caution-link__color-hover: @link__hover__color;
30 @message-global-caution-link__color-active: @link__active__color; 30 @message-global-caution-link__color-active: @link__active__color;
31 @message-global-caution__border-color: none; 31 @message-global-caution__border-color: none;
32  32 
33 @customer-welcome__z-index: @dropdown-list__z-index + 1; 33 @customer-welcome__z-index: @dropdown-list__z-index + 1;
34  34 
35 @addto-color: @color-gray60; 35 @addto-color: @color-gray60;
36 @addto-hover-color: @primary__color; 36 @addto-hover-color: @primary__color;
37  37 
38 @price-color: @color-gray34; 38 @price-color: @color-gray34;
39 @price-size: 22px; 39 @price-size: 22px;
40 @price-size-desktop: 36px; 40 @price-size-desktop: 36px;
41  41 
42 @button__shadow: inset 0 1px 0 0 rgba(255, 255, 255, 1), inset 0 -1px 0 0 fade(@border-color__base, 30); //  Used for secondary button and catalog toolbar controls 42 @button__shadow: inset 0 1px 0 0 rgba(255, 255, 255, 1), inset 0 -1px 0 0 fade(@border-color__base, 30); //  Used for secondary button and catalog toolbar controls
43 @button__shadow-active: inset 0 1px 0 0 fade(@border-color__base, 80), inset 0 -1px 0 0 fade(@border-color__base, 30); //  Used for secondary button and catalog toolbar controls 43 @button__shadow-active: inset 0 1px 0 0 fade(@border-color__base, 80), inset 0 -1px 0 0 fade(@border-color__base, 30); //  Used for secondary button and catalog toolbar controls
44  44 
45 @h1__margin-bottom__desktop: @indent__xl; 45 @h1__margin-bottom__desktop: @indent__xl;
46  46 
47 // 47 //
48 //  Footer 48 //  Footer
49 //  --------------------------------------------- 49 //  ---------------------------------------------
50  50 
51 @footer__background-color: @color-gray-light01; 51 @footer__background-color: @color-gray-light01;
52 @footer-links-separator-border-color: @color-gray-light4; 52 @footer-links-separator-border-color: @color-gray-light4;
53 @footer-links-color: @color-gray34; 53 @footer-links-color: @color-gray34;
54 @footer-links-color-hover: @color-gray20; 54 @footer-links-color-hover: @color-gray20;
55 @footer-links-color-current: @primary__color__light; 55 @footer-links-color-current: @primary__color__light;
56  56 
57 // 57 //
58 //  Layered navigation 58 //  Layered navigation
59 //  --------------------------------------------- 59 //  ---------------------------------------------
60  60 
61 @filter-title-background-color: @color-gray94; 61 @filter-title-background-color: @color-gray94;
62 @filter-link: @color-gray-darken4; 62 @filter-link: @color-gray-darken4;
63 @filter-link-hover: darken(@filter-link, 30%); 63 @filter-link-hover: darken(@filter-link, 30%);
64 @filter-quantity: @color-gray52; 64 @filter-quantity: @color-gray52;
65  65 
66 // 66 //
67 //  Common 67 //  Common
68 //  _____________________________________________ 68 //  _____________________________________________
69  69 
70 & when (@media-common = true) { 70 & when (@media-common = true) {
71     body { 71     body {
72         .lib-css(background-color, @page__background-color); 72         .lib-css(background-color, @page__background-color);
73     } 73     }
74  74 
75     //  ToDo UI: move it directly to .page-wrapper (now it doesn't appear in mediaquery cuz of size of css) 75     //  ToDo UI: move it directly to .page-wrapper (now it doesn't appear in mediaquery cuz of size of css)
76     .page-wrapper { 76     .page-wrapper {
77         .ie9 & { 77         .ie9 & {
78             .lib-css(background-color, @page__background-color); 78             .lib-css(background-color, @page__background-color);
79             min-height: 0; 79             min-height: 0;
80         } 80         }
81     } 81     }
82  82 
83     .columns .column.main { 83     .columns .column.main {
84         max-width: 100%; 84         max-width: 100%;
85         padding-bottom: 40px; 85         padding-bottom: 40px;
86     } 86     }
87  87 
88     // 88     //
89     //  Header 89     //  Header
90     //  --------------------------------------------- 90     //  ---------------------------------------------
91  91 
92     .page-header { 92     .page-header {
93         .lib-css(background-color, @header__background-color); 93         .lib-css(background-color, @header__background-color);
94         .lib-css(border-top, 3px solid @header__border-color); 94         .lib-css(border-top, 3px solid @header__border-color);
95         position: relative; 95         position: relative;
96         z-index: 20; 96         z-index: 20;
97         .panel.wrapper { 97         .panel.wrapper {
98             .lib-css(color, @header-panel__text-color); 98             .lib-css(color, @header-panel__text-color);
99         } 99         }
100     } 100     }
101  101 
102     .header.panel { 102     .header.panel {
103         > .header.links { 103         > .header.links {
104             .lib-list-inline(); 104             .lib-list-inline();
105             float: right; 105             float: right;
106             margin-left: auto; 106             margin-left: auto;
107             margin-right: @indent__base; 107             margin-right: @indent__base;
108             > li { 108             > li {
109                 text-transform: uppercase; 109                 text-transform: uppercase;
110                 > a { 110                 > a {
111                     .lib-link( 111                     .lib-link(
112                     @_link-color: inherit, 112                     @_link-color: inherit,
113                     @_link-text-decoration: none, 113                     @_link-text-decoration: none,
114                     @_link-color-visited: inherit, 114                     @_link-color-visited: inherit,
115                     @_link-text-decoration-visited: none, 115                     @_link-text-decoration-visited: none,
116                     @_link-color-hover: inherit, 116                     @_link-color-hover: inherit,
117                     @_link-color-active: inherit, 117                     @_link-color-active: inherit,
118                     ); 118                     );
119                 } 119                 }
120             } 120             }
121         } 121         }
122     } 122     }
123  123 
124     .header { 124     .header {
125         &.content:extend(.abs-add-clearfix all) { 125         &.content:extend(.abs-add-clearfix all) {
126             position: relative; 126             position: relative;
127         } 127         }
128     } 128     }
129  129 
130     .logo { 130     .logo {
131         display: block; 131         display: block;
132         position: relative; 132         position: relative;
133         z-index: 5; 133         z-index: 5;
134         img { 134         img {
135             display: block; 135             display: block;
136             max-height: 50px; 136             max-height: 50px;
137             max-width: 100%; 137             max-width: 100%;
138             height: auto; 138             height: auto;
139         } 139         }
140         .page-print & { 140         .page-print & {
141             display: inline-block; 141             display: inline-block;
142             float: none; 142             float: none;
143         } 143         }
144     } 144     }
145  145 
146     .page-main { 146     .page-main {
147         > .page-title-wrapper { 147         > .page-title-wrapper {
148             .page-title + .action { 148             .page-title + .action {
149                 margin-top: @indent__l; 149                 margin-top: @indent__l;
150             } 150             }
151         } 151         }
152     } 152     }
153  153 
154     .action.skip { 154     .action.skip {
155         &:not(:focus) { 155         &:not(:focus) {
156             &:extend(.abs-visually-hidden all); 156             &:extend(.abs-visually-hidden all);
157         } 157         }
158         &:focus { 158         &:focus {
159             .lib-css(background, @color-gray94); 159             .lib-css(background, @color-gray94);
160             .lib-css(padding, @indent__s); 160             .lib-css(padding, @indent__s);
161             box-sizing: border-box; 161             box-sizing: border-box;
162             left: 0; 162             left: 0;
163             position: absolute; 163             position: absolute;
164             text-align: center; 164             text-align: center;
165             top: 0; 165             top: 0;
166             width: 100%; 166             width: 100%;
167             z-index: 15; 167             z-index: 15;
168         } 168         }
169     } 169     }
170  170 
171     // 171     //
172     //  Global notice 172     //  Global notice
173     //  --------------------------------------------- 173     //  ---------------------------------------------
174     .message { 174     .message {
175       &.success { 175       &.success {
176         border-radius: 0; 176         border-radius: 0;
177         font-size: 1em; 177         font-size: 1em;
178       } 178       }
179       &.notice { 179       &.notice {
180         font-size: 1em; 180         font-size: 1em;
181       } 181       }
182       &.info{ 182       &.info{
183         font-size: 1em; 183         font-size: 1em;
184       } 184       }
185       &.error { 185       &.error {
186         font-size: 1em; 186         font-size: 1em;
187       } 187       }
188       &.warning {font-size: 1em;} 188       &.warning {font-size: 1em;}
189     } 189     }
190     .field-error { 190     .field-error {
191       font-size: 1em; 191       font-size: 1em;
192     } 192     }
193     .message.global { 193     .message.global {
194         p { 194         p {
195             margin: 0; 195             margin: 0;
196         } 196         }
197         &.noscript, 197         &.noscript,
198         &.cookie { 198         &.cookie {
199             .lib-message(@_message-type: global-note); 199             .lib-message(@_message-type: global-note);
200             margin: 0; 200             margin: 0;
201         } 201         }
202         &.cookie { 202         &.cookie {
203             bottom: 0; 203             bottom: 0;
204             left: 0; 204             left: 0;
205             position: fixed; 205             position: fixed;
206             right: 0; 206             right: 0;
207             z-index: 3; 207             z-index: 3;
208             .actions { 208             .actions {
209                 margin-top: @indent__s; 209                 margin-top: @indent__s;
210             } 210             }
211         } 211         }
212         &.demo { 212         &.demo {
213             .lib-message(@_message-type: global-caution); 213             .lib-message(@_message-type: global-caution);
214             margin-bottom: 0; 214             margin-bottom: 0;
215             text-align: center; 215             text-align: center;
216         } 216         }
217     } 217     }
218  218 
219     .page-header, 219     .page-header,
220     .page-footer { 220     .page-footer {
221         .switcher { 221         .switcher {
222             .options { 222             .options {
223                 .lib-dropdown( 223                 .lib-dropdown(
224                     @_dropdown-actions-padding: 0, 224                     @_dropdown-actions-padding: 0,
225                     @_dropdown-list-item-padding: 0, 225                     @_dropdown-list-item-padding: 0,
226                     @_dropdown-toggle-icon-content: @icon-down, 226                     @_dropdown-toggle-icon-content: @icon-down,
227                     @_dropdown-toggle-active-icon-content: @icon-up, 227                     @_dropdown-toggle-active-icon-content: @icon-up,
228                     @_icon-font-text-hide: true, 228                     @_icon-font-text-hide: true,
229                     @_dropdown-list-min-width: 120px, 229                     @_dropdown-list-min-width: 120px,
230                     @_dropdown-list-border: 0 230                     @_dropdown-list-border: 0
231                 ); 231                 );
232                 ul.dropdown { 232                 ul.dropdown {
233                     border-radius: 0; 233                     border-radius: 0;
234                     box-shadow: 0 10px 30px 10px rgba(0,0,0,.05); 234                     box-shadow: 0 10px 30px 10px rgba(0,0,0,.05);
235                     border: 1px solid #ccc !important; 235                     border: 1px solid #ccc !important;
236                     padding: 4px 0 !important; 236                     padding: 4px 0 !important;
237                     left: 0; 237                     left: 0;
238                     li { 238                     li {
239                         border-radius: 0; 239                         border-radius: 0;
240                     } 240                     }
241                     a { 241                     a {
242                         display: block; 242                         display: block;
243                         color: @base-font-color; 243                         color: @base-font-color;
244                         padding: 0 7px; 244                         padding: 0 7px;
245                         font-size: 1em; 245                         font-size: 1em;
246                         line-height: 25px; 246                         line-height: 25px;
247                         font-weight: 400; 247                         font-weight: 400;
248                         & > img { 248                         & > img {
249                             margin-bottom: 3px; 249                             margin-bottom: 3px;
250                             margin-right: 3px; 250                             margin-right: 3px;
251                             vertical-align: middle; 251                             vertical-align: middle;
252                         } 252                         }
253                         &:hover { 253                         &:hover {
254                             text-decoration: none; 254                             text-decoration: none;
255                         } 255                         }
256                     } 256                     }
257                 } 257                 }
258                 .action.toggle { 258                 .action.toggle {
259                   display: flex; 259                   display: flex;
260                   align-items: center; 260                   align-items: center;
261                   padding: 0 5px; 261                   padding: 0 5px;
262                   line-height: 26px; 262                   line-height: 26px;
263                   letter-spacing: 0.025em; 263                   letter-spacing: 0.025em;
264                   &::after { 264                   &::after {
265                     font-size: 1em; 265                     font-size: 1em;
266                     -webkit-font-smoothing: inherit; 266                     -webkit-font-smoothing: inherit;
267                     margin: 0 0 0 5px; 267                     margin: 0 0 0 5px;
268                     line-height: 1; 268                     line-height: 1;
269                   } 269                   }
270                   &.active { 270                   &.active {
271                       display: flex; 271                       display: flex;
272                       align-items: center; 272                       align-items: center;
273                       &::after { 273                       &::after {
274                         font-size: 1em; 274                         font-size: 1em;
275                         -webkit-font-smoothing: inherit; 275                         -webkit-font-smoothing: inherit;
276                         margin: 0 0 0 5px; 276                         margin: 0 0 0 5px;
277                         line-height: 1; 277                         line-height: 1;
278                       } 278                       }
279                   } 279                   }
280                 } 280                 }
281             } 281             }
282             strong { 282             strong {
283                 font-weight: inherit; 283                 font-weight: inherit;
284                 & > img { 284                 & > img {
285                     margin-bottom: 3px; 285                     margin-bottom: 3px;
286                     margin-right: 3px; 286                     margin-right: 3px;
287                     vertical-align: middle; 287                     vertical-align: middle;
288                 } 288                 }
289             } 289             }
290             .label:extend(.abs-visually-hidden all) { 290             .label:extend(.abs-visually-hidden all) {
291             } 291             }
292         } 292         }
293     } 293     }
294     span.split { 294     span.split {
295         height: 14px; 295         height: 14px;
296         width: 1px; 296         width: 1px;
297         border-right: 1px solid #ccc; 297         border-right: 1px solid #ccc;
298         margin: 0 13px; 298         margin: 0 13px;
299     } 299     }
300 } 300 }
301  301 
302 // 302 //
303 //  Navigation 303 //  Navigation
304 //  --------------------------------------------- 304 //  ---------------------------------------------
305  305 
306 @media(max-width: 991px){ 306 @media(max-width: 991px){
307     .nav-sections .switcher-trigger strong:after { 307     .nav-sections .switcher-trigger strong:after {
308         .lib-font-size(16); 308         .lib-font-size(16);
309         right: -25px; 309         right: -25px;
310         top: 2px; 310         top: 2px;
311     } 311     }
312     .navigation .parent .level-top:after { 312     .navigation .parent .level-top:after {
313         .lib-font-size(22); 313         .lib-font-size(22);
314         right: 10px; 314         right: 10px;
315         top: 13px; 315         top: 13px;
316     } 316     }
317     header.page-header.sticky-header .header-main{ 317     header.page-header.sticky-header .header-main{
318         position: fixed; 318         position: fixed;
319         width: 100%; 319         width: 100%;
320         top: 0; 320         top: 0;
321         box-shadow: 0 1px 0 0 rgba(0,0,0,.06); 321         box-shadow: 0 1px 0 0 rgba(0,0,0,.06);
322         background-color: #fff; 322         background-color: #fff;
323         z-index: 9; 323         z-index: 9;
324     } 324     }
325 } 325 }
326 @media(max-width: 991px){ 326 @media(max-width: 991px){
327   .nav-sections .customer-welcome, 327   .nav-sections .customer-welcome,
328   .nav-sections .customer-welcome + .authorization-link { 328   .nav-sections .customer-welcome + .authorization-link {
329       display: none; 329       display: none;
330   } 330   }
331 } 331 }
332 // 332 //
333 //  Common 333 //  Common
334 //  _____________________________________________ 334 //  _____________________________________________
335  335 
336 & when (@media-common = true) { 336 & when (@media-common = true) {
337  337 
338     // 338     //
339     //  Widgets 339     //  Widgets
340     //  --------------------------------------------- 340     //  ---------------------------------------------
341  341 
342     .sidebar { 342     .sidebar {
343         .widget.block:not(:last-child), 343         .widget.block:not(:last-child),
344         .widget:not(:last-child) { 344         .widget:not(:last-child) {
345             margin-bottom: @indent__xl; 345             margin-bottom: @indent__xl;
346         } 346         }
347     } 347     }
348  348 
349     .widget { 349     .widget {
350         clear: both; 350         clear: both;
351         .block-title:extend(.abs-block-widget-title all) { 351         .block-title:extend(.abs-block-widget-title all) {
352         } 352         }
353     } 353     }
354 } 354 }
355  355 
356 // 356 //
357 //  Desktop 357 //  Desktop
358 //  _____________________________________________ 358 //  _____________________________________________
359 & when (@media-common = true) { 359 & when (@media-common = true) {
360   .customer-welcome { 360   .customer-welcome {
361       .lib-dropdown( 361       .lib-dropdown(
362           @_toggle-selector: ~".action.switch", 362           @_toggle-selector: ~".action.switch",
363           @_options-selector: ~"ul", 363           @_options-selector: ~"ul",
364           @_dropdown-actions-padding: 0, 364           @_dropdown-actions-padding: 0,
365           @_dropdown-list-item-padding: 0, 365           @_dropdown-list-item-padding: 0,
366           @_dropdown-toggle-icon-content: @icon-down, 366           @_dropdown-toggle-icon-content: @icon-down,
367           @_dropdown-toggle-active-icon-content: @icon-up, 367           @_dropdown-toggle-active-icon-content: @icon-up,
368           @_icon-font-text-hide: true, 368           @_icon-font-text-hide: true,
369           @_icon-font-margin: 0 0 0 5px, 369           @_icon-font-margin: 0 0 0 5px,
370           @_icon-font-size: 16px, 370           @_icon-font-size: 16px,
371           @_icon-font-line-height: 15px, 371           @_icon-font-line-height: 15px,
372           @_dropdown-list-border: 0, 372           @_dropdown-list-border: 0,
373           @_dropdown-list-z-index: @customer-welcome__z-index 373           @_dropdown-list-z-index: @customer-welcome__z-index
374       ); 374       );
375       li:extend(.switcher li all) { 375       li:extend(.switcher li all) {
376           a { 376           a {
377               .lib-link( 377               .lib-link(
378               @_link-color: @color-gray20, 378               @_link-color: @color-gray20,
379               @_link-text-decoration: none, 379               @_link-text-decoration: none,
380               @_link-color-visited: @color-gray20, 380               @_link-color-visited: @color-gray20,
381               @_link-text-decoration-visited: none, 381               @_link-text-decoration-visited: none,
382               @_link-color-hover: @color-gray20, 382               @_link-color-hover: @color-gray20,
383               @_link-text-decoration-hover: none, 383               @_link-text-decoration-hover: none,
384               @_link-color-active: @color-gray20, 384               @_link-color-active: @color-gray20,
385               @_link-text-decoration-active: none 385               @_link-text-decoration-active: none
386               ); 386               );
387               display: block; 387               display: block;
388               line-height: 1.2; 388               line-height: 1.2;
389               padding: 5px; 389               padding: 5px;
390               text-transform: capitalize; 390               text-transform: capitalize;
391               font-weight: 400; 391               font-weight: 400;
392               font-size: 12px; 392               font-size: 12px;
393           } 393           }
394       } 394       }
395       .customer-menu { 395       .customer-menu {
396           display: none; 396           display: none;
397       } 397       }
398       .action.switch { 398       .action.switch {
399           .lib-button-reset(); 399           .lib-button-reset();
400           vertical-align: top; 400           vertical-align: top;
401       } 401       }
402       .header.links { 402       .header.links {
403           min-width: 175px; 403           min-width: 175px;
404           box-shadow: 0 0 3px rgba(0,0,0,0.25); 404           box-shadow: 0 0 3px rgba(0,0,0,0.25);
405           border-radius: 3px; 405           border-radius: 3px;
406           margin-top: 7px; 406           margin-top: 7px;
407           left: auto; 407           left: auto;
408           right: 0; 408           right: 0;
409           &:before { 409           &:before {
410               left: auto; 410               left: auto;
411               right: 10px; 411               right: 10px;
412           } 412           }
413           &:after { 413           &:after {
414               left: auto; 414               left: auto;
415               right: 9px; 415               right: 9px;
416               border-bottom-color: #ccc; 416               border-bottom-color: #ccc;
417           } 417           }
418       } 418       }
419       &.active { 419       &.active {
420           .action.switch { 420           .action.switch {
421               .lib-icon-font-symbol( 421               .lib-icon-font-symbol(
422               @_icon-font-content: @icon-up, 422               @_icon-font-content: @icon-up,
423               @_icon-font-position: after 423               @_icon-font-position: after
424               ); 424               );
425           } 425           }
426           .customer-menu { 426           .customer-menu {
427               display: block; 427               display: block;
428           } 428           }
429       } 429       }
430       .greet { 430       .greet {
431           display: none; 431           display: none;
432       } 432       }
433   } 433   }
434 } 434 }
435 @media(min-width: 992px) { 435 @media(min-width: 992px) {
436     html, 436     html,
437     body { 437     body {
438         min-height: 100%; //  Stretch screen area for sticky footer 438         min-height: 100%; //  Stretch screen area for sticky footer
439     } 439     }
440  440 
441     body { 441     body {
442         .ie9 & { 442         .ie9 & {
443             .lib-css(background-color, @copyright__background-color); 443             .lib-css(background-color, @copyright__background-color);
444         } 444         }
445     } 445     }
446     .customer-menu .header.links a { 446     .customer-menu .header.links a {
447         color: #777 !important; 447         color: #777 !important;
448     } 448     }
449  449 
450     .sticky-logo { 450     .sticky-logo {
451         float: left; 451         float: left;
452         margin-top: 13px; 452         margin-top: 13px;
453         margin-right: 20px; 453         margin-right: 20px;
454         .logo { 454         .logo {
455             margin: 0 !important; 455             margin: 0 !important;
456  456 
457             img { 457             img {
458                 height: 35px; 458                 height: 35px;
459                 width: auto; 459                 width: auto;
460                 max-width: none; 460                 max-width: none;
461                 margin-right: 20px; 461                 margin-right: 20px;
462             } 462             }
463         } 463         }
464     } 464     }
465  465 
466     header.page-header.sticky-header { 466     header.page-header.sticky-header {
467         .nav-sections { 467         .nav-sections {
468             position: fixed !important; 468             position: fixed !important;
469             left: 0 !important; 469             left: 0 !important;
470             top: 0 !important; 470             top: 0 !important;
471             z-index: 200 !important; 471             z-index: 200 !important;
472             margin: 0 !important; 472             margin: 0 !important;
473             padding: 0; 473             padding: 0;
474             margin: 0 !important; 474             margin: 0 !important;
475             width: 100% !important; 475             width: 100% !important;
476             box-shadow: 0 1px 2px rgba(0,0,0,0.1); 476             box-shadow: 0 1px 2px rgba(0,0,0,0.1);
477             -webkit-backface-visibility: hidden; 477             -webkit-backface-visibility: hidden;
478             backface-visibility: hidden; 478             backface-visibility: hidden;
479             pointer-events: all; 479             pointer-events: all;
480         } 480         }
481         .navigation { 481         .navigation {
482             padding: 0 10px; 482             padding: 0 10px;
483  483 
484             & > ul { 484             & > ul {
485                 background-color: transparent; 485                 background-color: transparent;
486             } 486             }
487             li.level0 { 487             li.level0 {
488                 & > a > span.cat-label { 488                 & > a > span.cat-label {
489                     top: -9px; 489                     top: -9px;
490                 } 490                 }
491             } 491             }
492         } 492         }
493         .minicart-wrapper { 493         .minicart-wrapper {
494             position: absolute; 494             position: absolute;
495             right: 10px; 495             right: 10px;
496             top: 20%;  496             top: 20%;
497         } 497         }
498  498 
499     } 499     }
500     .page-header { 500     .page-header {
501         margin-bottom: 0; 501         margin-bottom: 0;
502         .header.panel:extend(.abs-add-clearfix-desktop all) { 502         .header.panel:extend(.abs-add-clearfix-desktop all) {
503             padding:0; 503             padding:0;
504         } 504         }
505         .switcher { 505         .switcher {
506             float: left; 506             float: left;
507             margin-right: 15px; 507             margin-right: 15px;
508             .lib-vendor-prefix-order(1); 508             .lib-vendor-prefix-order(1);
509         } 509         }
510         .navigation { 510         .navigation {
511             .level0 { 511             .level0 {
512                 & > .level-top { 512                 & > .level-top {
513                     text-transform: uppercase; 513                     text-transform: uppercase;
514                     display: inline-block; 514                     display: inline-block;
515                 } 515                 }
516                 &.parent > a:after { 516                 &.parent > a:after {
517                     content: @icon-down-open; 517                     content: @icon-down-open;
518                     display: inline-block; 518                     display: inline-block;
519                     font-family: @icons__font-name; 519                     font-family: @icons__font-name;
520                     vertical-align: top; 520                     vertical-align: top;
521                     margin-left: 5px; 521                     margin-left: 5px;
522                     line-height: 42px; 522                     line-height: 42px;
523                 } 523                 }
524                 .submenu { 524                 .submenu {
525                     padding: 10px; 525                     padding: 10px;
526                     box-shadow: 0 10px 25px rgba(0,0,0,.15); 526                     box-shadow: 0 10px 25px rgba(0,0,0,.15);
527                     li { 527                     li {
528                         margin-bottom: 0; 528                         margin-bottom: 0;
529                         position: relative; 529                         position: relative;
530                     } 530                     }
531                     .submenu { 531                     .submenu {
532                         border-top-width: 0; 532                         border-top-width: 0;
533                         margin-top: -6px !important; 533                         margin-top: -6px !important;
534                         margin-left: 8px !important; 534                         margin-left: 8px !important;
535                     } 535                     }
536                     li.parent > a:after { 536                     li.parent > a:after {
537                         content: @icon-right-open; 537                         content: @icon-right-open;
538                         display: inline-block; 538                         display: inline-block;
539                         font-family: @icons__font-name; 539                         font-family: @icons__font-name;
540                         vertical-align: top; 540                         vertical-align: top;
541                         margin-left: 6px; 541                         margin-left: 6px;
542                         margin-right: 0; 542                         margin-right: 0;
543                         line-height: 15px; 543                         line-height: 15px;
544                         float: right; 544                         float: right;
545                     } 545                     }
546                     .active > a { 546                     .active > a {
547                         border: 0; 547                         border: 0;
548                     } 548                     }
549                 } 549                 }
550             } 550             }
551         } 551         }
552         .drop-menu { 552         .drop-menu {
553             position: relative; 553             position: relative;
554             .nav-sections { 554             .nav-sections {
555                 position: absolute; 555                 position: absolute;
556                 top: 100%; 556                 top: 100%;
557                 left: 0; 557                 left: 0;
558                 width: 100%; 558                 width: 100%;
559                 background-color: #fff; 559                 background-color: #fff;
560                 border: 1px solid #e7e7e7; 560                 border: 1px solid #e7e7e7;
561                 visibility: hidden; 561                 visibility: hidden;
562                 opacity: 0; 562                 opacity: 0;
563                 &.visible { 563                 &.visible {
564                   visibility: visible; 564                   visibility: visible;
565                   opacity: 1; 565                   opacity: 1;
566                 } 566                 }
567             } 567             }
568             > a { 568             > a {
569                 display: block; 569                 display: block;
570                 font-size: 14px; 570                 font-size: 14px;
571                 letter-spacing: -.01em; 571                 letter-spacing: -.01em;
572                 font-weight: 700; 572                 font-weight: 700;
573                 background: #222529; 573                 background: #222529;
574                 color: #fff; 574                 color: #fff;
575                 line-height: 20px; 575                 line-height: 20px;
576                 padding: 15px 15px 15px 20px; 576                 padding: 15px 15px 15px 20px;
577                 &:hover { 577                 &:hover {
578                     background-color: #555; 578                     background-color: #555;
579                 } 579                 }
580             } 580             }
581         } 581         }
582     } 582     }
583     .cms-index-index .page-header { 583     .cms-index-index .page-header {
584         .drop-menu { 584         .drop-menu {
585             > a { 585             > a {
586                 pointer-events: none; 586                 pointer-events: none;
587             } 587             }
588             .nav-sections { 588             .nav-sections {
589                 visibility: visible; 589                 visibility: visible;
590                 opacity: 1; 590                 opacity: 1;
591                 padding: 0 !important; 591                 padding: 0 !important;
592             } 592             }
593         } 593         }
594         &.sticky-header { 594         &.sticky-header {
595             .drop-menu { 595             .drop-menu {
596                 > a { 596                 > a {
597                     pointer-events: all; 597                     pointer-events: all;
598                 } 598                 }
599                 .nav-sections { 599                 .nav-sections {
600                     visibility: hidden; 600                     visibility: hidden;
601                     opacity: 0; 601                     opacity: 0;
602                     &.visible { 602                     &.visible {
603                         visibility: visible; 603                         visibility: visible;
604                         opacity: 1; 604                         opacity: 1;
605                     } 605                     }
606                 } 606                 }
607             } 607             }
608         } 608         }
609     } 609     }
610     .page-main { 610     .page-main {
611         > .page-title-wrapper { 611         > .page-title-wrapper {
612             .page-title { 612             .page-title {
613                 display: inline-block; 613                 display: inline-block;
614             } 614             }
615             .page-title + .action { 615             .page-title + .action {
616                 float: right; 616                 float: right;
617                 margin-top: @indent__base; 617                 margin-top: @indent__base;
618             } 618             }
619         } 619         }
620     } 620     }
621  621 
622     .header { 622     .header {
623         &.panel { 623         &.panel {
624             > .header.links { 624             > .header.links {
625                 .lib-list-inline(); 625                 .lib-list-inline();
626                 float: right; 626                 float: right;
627                 margin-left: auto; 627                 margin-left: auto;
628                 > li { 628                 > li {
629                     margin-bottom: 0; 629                     margin-bottom: 0;
630                     &.welcome, 630                     &.welcome,
631                     > a { 631                     > a {
632                         display: inline-block; 632                         display: inline-block;
633                     } 633                     }
634                     > a, > span { 634                     > a, > span {
635                         border-left: 1px solid rgba(255,255,255,0.18); 635                         border-left: 1px solid rgba(255,255,255,0.18);
636                     } 636                     }
637                     &:first-child { 637                     &:first-child {
638                         > a, > span { 638                         > a, > span {
639                             padding-left: 0; 639                             padding-left: 0;
640                             border-left: 0; 640                             border-left: 0;
641                         } 641                         }
642                     } 642                     }
643                     &.welcome { 643                     &.welcome {
644                         a { 644                         a {
645                             .lib-css(color, @color-white); 645                             .lib-css(color, @color-white);
646                             .lib-css(padding-left, @indent__xs); 646                             .lib-css(padding-left, @indent__xs);
647                         } 647                         }
648                     } 648                     }
649                 } 649                 }
650                 > .customer-welcome + .authorization-link { 650                 > .customer-welcome + .authorization-link {
651                     display: none; 651                     display: none;
652                 } 652                 }
653             } 653             }
654         } 654         }
655     } 655     }
656  656 
657     .logo { 657     .logo {
658         img { 658         img {
659             max-height: inherit; 659             max-height: inherit;
660         } 660         }
661     } 661     }
662  662 
663     .page-wrapper { 663     .page-wrapper {
664         .lib-vendor-prefix-display(flex); 664         .lib-vendor-prefix-display(flex);
665         .lib-vendor-prefix-flex-direction(column); 665         .lib-vendor-prefix-flex-direction(column);
666         margin: 0; 666         margin: 0;
667         min-height: 100%; // Stretch content area for sticky footer 667         min-height: 100%; // Stretch content area for sticky footer
668         position: relative; 668         position: relative;
669         transition: margin .3s ease-out 0; 669         transition: margin .3s ease-out 0;
670         > .breadcrumbs, 670         > .breadcrumbs,
671         > .top-container, 671         > .top-container,
672         > .widget { 672         > .widget {
673             box-sizing: border-box; 673             box-sizing: border-box;
674             width: 100%; 674             width: 100%;
675         } 675         }
676         .ie10 &, 676         .ie10 &,
677         .ie11 & { 677         .ie11 & {
678             height: 100%; 678             height: 100%;
679         } 679         }
680     } 680     }
681 } 681 }
682  682 
683  683 
684 // 684 //
685 //  Common 685 //  Common
686 //  _____________________________________________ 686 //  _____________________________________________
687  687 
688 & when (@media-common = true) { 688 & when (@media-common = true) {
689     .no-display:extend(.abs-no-display all) { 689     .no-display:extend(.abs-no-display all) {
690     } 690     }
691  691 
692     // 692     //
693     //  Calendar 693     //  Calendar
694     //  --------------------------------------------- 694     //  ---------------------------------------------
695  695 
696     .ui-datepicker td { 696     .ui-datepicker td {
697         padding: 0; 697         padding: 0;
698     } 698     }
699  699 
700     .ui-tooltip { 700     .ui-tooltip {
701         border: @tooltip__border-width solid @tooltip__border-color; 701         border: @tooltip__border-width solid @tooltip__border-color;
702         .lib-css(background, @tooltip__background); 702         .lib-css(background, @tooltip__background);
703         padding: 10px; 703         padding: 10px;
704     } 704     }
705     [class^="porto-icon-"]:before, [class*=" porto-icon-"]:before { 705     [class^="porto-icon-"]:before, [class*=" porto-icon-"]:before {
706         font-family: @icon-font-family; 706         font-family: @icon-font-family;
707         font-style: normal; 707         font-style: normal;
708         font-weight: normal; 708         font-weight: normal;
709         speak: none; 709         speak: none;
710  710 
711         display: inline-block; 711         display: inline-block;
712         text-decoration: inherit; 712         text-decoration: inherit;
713         width: 1em; 713         width: 1em;
714         margin-right: .1em; 714         margin-right: .1em;
715         text-align: center; 715         text-align: center;
716         /* opacity: .8; */ 716         /* opacity: .8; */
717  717 
718         /* For safety - reset parent styles, that can break glyph codes*/ 718         /* For safety - reset parent styles, that can break glyph codes*/
719         font-variant: normal; 719         font-variant: normal;
720         text-transform: none; 720         text-transform: none;
721  721 
722         /* fix buttons height, for twitter bootstrap */ 722         /* fix buttons height, for twitter bootstrap */
723         line-height: 1em; 723         line-height: 1em;
724  724 
725         /* Animation center compensation - margins should be symmetric */ 725         /* Animation center compensation - margins should be symmetric */
726         /* remove if not needed */ 726         /* remove if not needed */
727         margin-left: .1em; 727         margin-left: .1em;
728  728 
729         /* you can be more comfortable with increased icons size */ 729         /* you can be more comfortable with increased icons size */
730         /* font-size: 120%; */ 730         /* font-size: 120%; */
731  731 
732         /* Font smoothing. That was taken from TWBS */ 732         /* Font smoothing. That was taken from TWBS */
733         -webkit-font-smoothing: antialiased; 733         -webkit-font-smoothing: antialiased;
734         -moz-osx-font-smoothing: grayscale; 734         -moz-osx-font-smoothing: grayscale;
735  735 
736         /* Uncomment for 3D effect */ 736         /* Uncomment for 3D effect */
737         /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ 737         /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
738     } 738     }
739     .panel { 739     .panel {
740         -webkit-box-shadow: none; 740         -webkit-box-shadow: none;
741         box-shadow: none; 741         box-shadow: none;
742     } 742     }
743     .recent-posts { 743     .recent-posts {
744         .item { 744         .item {
745             .post-image { 745             .post-image {
746                 border-radius: 5px; 746                 border-radius: 5px;
747                 overflow: hidden; 747                 overflow: hidden;
748                 margin: 0 0 15px 0; 748                 margin: 0 0 15px 0;
749                 padding: 2px; 749                 padding: 2px;
750                 border: 1px solid #e1e1e1; 750                 border: 1px solid #e1e1e1;
751                 background-color: #fff; 751                 background-color: #fff;
752                 min-height: 120px; 752                 min-height: 120px;
753  753 
754                 img { 754                 img {
755                     border-radius: 4px; 755                     border-radius: 4px;
756                     width: 100%; 756                     width: 100%;
757                 } 757                 }
758             } 758             }
759         } 759         }
760         .post-date { 760         .post-date {
761             float: left; 761             float: left;
762             margin-right: 10px; 762             margin-right: 10px;
763             text-align: center; 763             text-align: center;
764  764 
765             .day { 765             .day {
766                 background-color: #f7f7f7; 766                 background-color: #f7f7f7;
767                 color: @theme-color; 767                 color: @theme-color;
768                 display: block; 768                 display: block;
769                 font-size: 18px; 769                 font-size: 18px;
770                 font-weight: bold; 770                 font-weight: bold;
771                 padding: 8px; 771                 padding: 8px;
772             } 772             }
773             .month { 773             .month {
774                 background-color: @theme-color; 774                 background-color: @theme-color;
775                 border-radius: 0 0 2px 2px; 775                 border-radius: 0 0 2px 2px;
776                 box-shadow: 0 -1px 0 0 rgba(0,0,0,.07) inset; 776                 box-shadow: 0 -1px 0 0 rgba(0,0,0,.07) inset;
777                 color: #fff; 777                 color: #fff;
778                 font-size: 0.9em; 778                 font-size: 0.9em;
779                 padding: 2px 0; 779                 padding: 2px 0;
780                 display: block; 780                 display: block;
781                 width: 45px; 781                 width: 45px;
782             } 782             }
783         } 783         }
784         .postTitle { 784         .postTitle {
785             min-height: 55px; 785             min-height: 55px;
786             border: 0; 786             border: 0;
787  787 
788             h2 { 788             h2 {
789                 font-size: 20px; 789                 font-size: 20px;
790                 line-height: 27px; 790                 line-height: 27px;
791                 font-weight: normal; 791                 font-weight: normal;
792                 padding: 0; 792                 padding: 0;
793                 margin: 0 0 10px 0; 793                 margin: 0 0 10px 0;
794             } 794             }
795             a:hover { 795             a:hover {
796                 text-decoration: none; 796                 text-decoration: none;
797             } 797             }
798         } 798         }
799         .postContent { 799         .postContent {
800             font-size: 14px; 800             font-size: 14px;
801             line-height: 1.5; 801             line-height: 1.5;
802             padding-bottom: 0; 802             padding-bottom: 0;
803             overflow: hidden; 803             overflow: hidden;
804             text-overflow: ellipsis; 804             text-overflow: ellipsis;
805             display: -webkit-box; 805             display: -webkit-box;
806             -webkit-line-clamp: 3; 806             -webkit-line-clamp: 3;
807             -webkit-box-orient: vertical; 807             -webkit-box-orient: vertical;
808             margin-bottom: 15px; 808             margin-bottom: 15px;
809  809 
810             & > p { 810             & > p {
811                 margin: 0; 811                 margin: 0;
812             } 812             }
813         } 813         }
814         a.readmore { 814         a.readmore {
815             font-weight: 300; 815             font-weight: 300;
816             font-size: 16px; 816             font-size: 16px;
817         } 817         }
818     } 818     }
819 } 819 }